<template>
  <el-container id="content-manage">
    <el-aside class="tree-aside">
      <h4 class="pic-type-title">
        <span>产品分类</span>
      </h4>
      <m-tree
        ref="myTree"
        :type="'image'"
        :tree-result="treeResult"
        :treeTotal="treeTotal"
        :list-options="productParams"
        :isexpand="true"
        @getList="getList"
        @create="newCategory"
        @batchRemove="batchRemoveCategory"
        @rename="renameCategory"
      ></m-tree>
    </el-aside>
    <el-main style="overflow: hidden">
      <Header
        v-if="$store.state.dashboard.isContentwrite"
        :count-pic="countPic"
        :pic-search-options="productParams"
        :is-batch-header-show="isBatchHeaderShow"
        @changeProductStatus="changeProductStatus"
        @getList="getList"
        @batchDelete="batchDelete"
      ></Header>
      <el-main>
        <List
          ref="product"
          :productDataList="productDataList"
          :pic-search-options="productParams"
          @changeProductStatus="changeProductStatus"
          @getList="getList"
          @batchDelete="batchDelete"
          @handleSelectionChange="handleSelectionChange"
        ></List>
        <el-dialog
          width="0"
          style="z-index: 10"
          :close-on-click-modal="false"
          :show-close="false"
          :modal-append-to-body="false"
        ></el-dialog>
      </el-main>
      <el-footer style="height: auto">
        <slot name="modal-footer"></slot>
      </el-footer>
    </el-main>
  </el-container>
</template>
<script>
import * as productManageApi from "@/api/request/productManageApi";
import MTree from "./MTrees";
import Header from "./header";
import List from "./list";

export default {
  components: {
    MTree,
    Header,
    List,
  },
  data() {
    return {
      virtualSearchOptions: {
        pageIndex: 1,
        pageSize: 10,
      },
      page: {
        pageIndex: 1,
        pageSize: 10,
      },
      productParams: {
        categoryIdList: [],
        productCode: "",
        productName: "",
        pageIndex: 1,
        pageSize: 10,
      },
      countPic: 0,
      idsList: [],
      productDataList: {},
      treeResult: null,
      treeTotal: {},
      formLabel: "标题",
    };
  },
  mounted() {
    this.getTreeAsync();
    this.getList();
  },
  created() {},
  methods: {
    /**
     * 删除分类
     */
    async batchRemoveCategory(idlist) {
      idlist = idlist == null ? this.idsList : idlist;
      this.$confirm("是否确认删除该分类？", "提示", {
        iconClass: "icon-warning",
        callback: async (action) => {
          if (action === "confirm") {
            let { status } = await productManageApi.ProductCategorydelete(
              idlist
            );
            if (status === 200) {
              this.getTreeAsync();
              this.$notify({
                customClass: "notify-success",
                message: `删除成功!`,
                showClose: false,
                duration: 1500,
              });
            }
          }
        },
      });
    },
    // 编辑
    async renameCategory(entity) {
      console.log(entity);
      let { status } = await productManageApi.ProductCategoryEdit(entity);
      if (status === 200) {
        this.$notify({
          customClass: "notify-success", //  notify-success ||  notify-error
          message: `编辑成功!`,
          showClose: false,
          duration: 1000,
        });
      } else {
        this.$notify({
          customClass: "notify-error", //  notify-success ||  notify-error
          message: `编辑失败!`,
          showClose: false,
          duration: 1000,
        });
      }
      this.getTreeAsync();
    },
    /** 新增分类 */
    async newCategory(entity) {
      await productManageApi.ProductCategoryCreate(entity).catch((i) => {
        if (i.status === 201) {
          this.$notify({
            customClass: "notify-success", //  notify-success ||  notify-error
            message: `新建成功!`,
            showClose: false,
            duration: 1000,
          });
        } else {
          this.$notify({
            customClass: "notify-error", //  notify-success ||  notify-error
            message: `新建失败!`,
            showClose: false,
            duration: 1000,
          });
        }
      });

      this.getTreeAsync();
    },
    // 点击左侧分类树菜单时的节点
    chooseCategoryNode(data) {
      if (data.sID) {
        this.virtualSearchOptions.sID = data.sID;
      }
      this.virtualSearchOptions.FormTitle = data.label;
    },
    // 请求列表数据
    async getList() {
      this.$Loading.show();
      let { data } = await productManageApi.getList(this.productParams);
      this.$Loading.hide();
      this.productDataList = data;
    },
    // 获取左侧列表菜单
    async getTreeAsync() {
      let { data } = await productManageApi.getProductCategoryList(this.page);
      console.log(data);
      data.forEach((item) => {
        item.label = item.categoryName;
        item.children.forEach((s) => {
          s.label = s.categoryName;
        });
      });
      this.treeResult = data;
      this.selectCategory = { id: this.treeResult[0].children[0].siteId };
      this.$refs.myTree.selectCategoryByNodeId(this.selectCategory.id);
    },

    /**
     * 启用或者停用表单
     *  @param {String} id 表单编号
     *  @param {Number} status 表单状态 0代表要禁用该表单，1代表要启用该表单
     */
    async changeProductStatus(id, status) {
      if (!status) {
        var message = "上架";
      } else {
        var message = "下架";
      }
      this.$confirm("您确认要" + message + "产品吗？", "提示", {
        iconClass: "icon-warning",
        callback: async (action) => {
          if (action === "confirm") {
            if (!status) {
              let { status } = await productManageApi.putOnline(id);
              if (status === 200) {
                this.$notify({
                  customClass: "notify-success", //  notify-success ||  notify-error
                  message: `${message}成功!`,
                  showClose: false,
                  duration: 1000,
                });
                this.getList();
              }
            } else {
              let { status } = await productManageApi.putOfflone(id);
              if (status === 200) {
                this.$notify({
                  customClass: "notify-success", //  notify-success ||  notify-error
                  message: `${message}成功!`,
                  showClose: false,
                  duration: 1000,
                });
                this.getList();
              }
            }
          }
        },
      });
    },
    async batchdEleteFormData(idlist) {},

    // 清空选中的列表
    clearSelectedList() {
      this.$refs.product && this.$refs.product.clearSelectedList();
    },
    // 批量更新的选中数量
    handleSelectionChange(list) {
      this.idsList = [];
      this.countPic = list.length;
      if (list.length < 1) return;
      list.forEach((item) => {
        this.idsList.push(item.id);
      });
      this.$emit("getImgInfo", list);
    },
    //删除
    batchDelete(id) {
      this.batchdEleteFormData(id);
    },
  },
  computed: {
    isBatchHeaderShow() {
      return this.idsList.length > 0 ? true : false;
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
// @import "../style/contentDetail";
.el-dialog__wrapper /deep/ .el-dialog {
  margin-top: 70px !important;
}
.uploadImgDialog /deep/ .el-dialog__header {
  padding: 0 20px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .el-dialog__headerbtn {
    top: 7px;
  }
}
</style>
